```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cpdown - 网页内容与YouTube字幕转Markdown工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f9fafb;
            color: #1f2937;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .highlight-text {
            background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0.1em 0;
            font-family: 'Noto Serif SC', serif;
            color: #4f46e5;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6 text-gray-900">
                        <span class="highlight-text">cpdown</span> - 您的网页内容转换专家
                    </h1>
                    <p class="text-xl text-gray-700 mb-8">
                        一键将网页内容或YouTube字幕转换为干净的Markdown格式，优化笔记整理和大语言模型处理流程。
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#installation" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105 shadow-lg">
                            <i class="fas fa-download mr-2"></i> 立即安装
                        </a>
                        <a href="#features" class="bg-white hover:bg-gray-100 text-indigo-600 px-6 py-3 rounded-lg font-medium transition duration-300 border border-indigo-600 transform hover:scale-105">
                            <i class="fas fa-info-circle mr-2"></i> 了解更多
                        </a>
                    </div>
                </div>
                <div class="lg:w-1/2">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1750670350948-8217210c-782d-4cca-8e9e-0dade2652f40.png" alt="cpdown截图" class="rounded-xl shadow-2xl border-4 border-white transform rotate-1 hover:rotate-0 transition duration-500">
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">核心功能</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    cpdown专为高效内容转换而设计，让您的笔记整理变得前所未有的简单
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 fade-in">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
                        <i class="fas fa-file-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">网页内容转Markdown</h3>
                    <p class="text-gray-600">
                        一键提取网页文本，生成无杂乱HTML标签的Markdown，简化复制粘贴流程，保持内容结构清晰。
                    </p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 fade-in" style="animation-delay: 0.1s;">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
                        <i class="fab fa-youtube text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">YouTube字幕提取</h3>
                    <p class="text-gray-600">
                        快速抓取视频字幕为Markdown格式，便于内容总结或翻译，特别适合教育工作者和内容创作者。
                    </p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 fade-in" style="animation-delay: 0.2s;">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
                        <i class="fas fa-keyboard text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">快捷键支持</h3>
                    <p class="text-gray-600">
                        通过自定义快捷键(如Ctrl+Shift+C)触发复制功能，提升工作效率，减少鼠标操作。
                    </p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 fade-in" style="animation-delay: 0.3s;">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
                        <i class="fas fa-globe text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">多浏览器兼容</h3>
                    <p class="text-gray-600">
                        支持Chrome、Edge等主流浏览器，安装即用，无需额外配置，跨平台体验一致。
                    </p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 fade-in" style="animation-delay: 0.4s;">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
                        <i class="fas fa-robot text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">LLM优化输出</h3>
                    <p class="text-gray-600">
                        生成结构化Markdown，适合直接输入大语言模型处理，提高AI内容处理的准确性和效率。
                    </p>
                </div>

                <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 fade-in" style="animation-delay: 0.5s;">
                    <div class="feature-icon w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
                        <i class="fas fa-lock-open text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">开源免费</h3>
                    <p class="text-gray-600">
                        完全开源，43星社区支持确保持续更新，无隐藏收费，所有功能免费使用。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">适用场景</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    无论您是研究人员、内容创作者还是开发者，cpdown都能显著提升您的工作效率
                </p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-4">
                            <i class="fas fa-graduation-cap text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900">学术研究</h3>
                    </div>
                    <p class="text-gray-600 drop-cap">
                        研究人员从学术网页复制内容到Obsidian、Notion等笔记工具时，保持格式整洁有序。告别杂乱HTML标签干扰，专注于内容本身，提高文献整理效率。
                    </p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mr-4">
                            <i class="fas fa-video text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900">视频内容创作</h3>
                    </div>
                    <p class="text-gray-600 drop-cap">
                        博主和内容创作者提取YouTube教程字幕，快速生成课程笔记或翻译稿。将视频内容转化为可编辑文本，便于二次创作和传播，节省大量手动输入时间。
                    </p>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mr-4">
                            <i class="fas fa-code text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900">技术文档整理</h3>
                    </div>
                    <p class="text-gray-600 drop-cap">
                        开发者整理技术博客为Markdown格式，轻松导入文档工具。保持代码块格式完整，技术文档转换无忧，项目文档管理更加高效专业。
                    </p>
                </div>
            </div>

            <div class="mt-12 text-center">
                <div class="inline-block bg-yellow-50 border-l-4 border-yellow-400 p-4">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 text-yellow-500">
                            <i class="fas fa-question-circle text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-lg font-medium text-gray-900">
                                您的笔记流程是否因网页格式混乱而受阻？
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">为什么选择cpdown？</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    与其他Markdown转换工具相比，cpdown专注于极简操作和LLM兼容性
                </p>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">功能</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">cpdown</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">其他工具</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50 transition duration-150">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">一键操作</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i> 支持</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-times text-red-500"></i> 部分支持</td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition duration-150">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">YouTube字幕支持</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i> 支持</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-times text-red-500"></i> 通常不支持</td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition duration-150">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">LLM优化输出</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i> 专门优化</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i> 基本支持</td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition duration-150">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">开源免费</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i> 完全免费</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i> 部分免费</td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition duration-150">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">复杂网页处理</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-info-circle text-blue-500"></i> 基本支持</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i> 部分更强</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="mt-12 bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r">
                <div class="flex">
                    <div class="flex-shrink-0 text-blue-500">
                        <i class="fas fa-exclamation-circle text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-medium text-blue-800">局限性说明</h3>
                        <p class="text-blue-700">
                            cpdown功能相对单一，复杂网页(如动态图表)可能提取不全，需结合其他工具使用。但对于大多数文本内容转换场景，它提供了最简洁高效的解决方案。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Guide -->
    <section id="installation" class="py-16 px-4 sm:px-6 lg:px-8 bg-indigo-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">上手指南</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    完全免费，无需注册，几分钟内即可开始使用
                </p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <span class="bg-indigo-100 text-indigo-800 text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center">1</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">安装扩展</h3>
                    <p class="text-gray-600 mb-4">
                        访问Chrome Web Store，搜索"cpdown"并添加扩展
                    </p>
                    <a href="https://github.com/ysm-dev/cpdown" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
                        前往安装 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <span class="bg-indigo-100 text-indigo-800 text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center">2</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">配置选项</h3>
                    <p class="text-gray-600 mb-4">
                        打开扩展选项页面设置快捷键(Ctrl+Shift+C或自定义)
                    </p>
                    <div class="bg-gray-100 p-3 rounded-lg text-sm font-mono break-all">
                        chrome://extensions/?options=knnaflplggjdedobhbidojmmnocfbopf
                    </div>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm card-hover transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <span class="bg-indigo-100 text-indigo-800 text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center">3</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">开始使用</h3>
                    <p class="text-gray-600 mb-4">
                        浏览网页，点击扩展图标或使用快捷键，复制Markdown到剪贴板
                    </p>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
                        <span>提示：右键菜单也支持快速操作</span>
                    </div>
                </div>
            </div>

            <div class="mt-12 p-6 bg-white rounded-xl shadow-sm">
                <div class="flex items-start">
                    <div class="flex-shrink-0 bg-red-100 p-3 rounded-lg text-red-600">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-bold text-gray-900">重要提示</h3>
                        <p class="text-gray-600 mt-2">
                            安装后，请前往
                            <span class="font-mono bg-gray-100 px-2 py-1 rounded">chrome://extensions/?options=knnaflplggjdedobhbidojmmnocfbopf</span>
                            或点击扩展程序详情页中的"选项"链接来配置cpdown。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow Diagram -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">cpdown工作流程</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    从网页到整理好的Markdown内容，只需简单几步
                </p>
            </div>

            <div class="mermaid">
                graph LR
                    A[浏览网页或YouTube视频] --> B[点击cpdown图标或使用快捷键]
                    B --> C{内容类型判断}
                    C -->|网页内容| D[提取正文去除广告]
                    C -->|YouTube字幕| E[获取视频字幕]
                    D --> F[转换为干净Markdown]
                    E --> F
                    F --> G[复制到剪贴板]
                    G --> H[粘贴到笔记工具或LLM]
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-indigo-500 to-purple-600">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl font-bold text-white mb-6">准备好提升您的内容转换体验了吗？</h2>
            <p class="text-xl text-indigo-100 mb-8">
                cpdown完全免费开源，立即安装开始享受高效的Markdown转换工作流
            </p>
            <a href="https://github.com/ysm-dev/cpdown" class="inline-block bg-white hover:bg-gray-100 text-indigo-600 px-8 py-4 rounded-lg font-bold text-lg transition duration-300 transform hover:scale-105 shadow-lg">
                <i class="fas fa-download mr-2"></i> 立即获取cpdown
            </a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // 微交互效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
            });
        });

        // 滚动动画
        window.addEventListener('scroll', function() {
            const elements = document.querySelectorAll('.fade-in');
            elements.forEach(el => {
                const rect = el.getBoundingClientRect();
                if (rect.top <= window.innerHeight - 100) {
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                }
            });
        });
    </script>
</body>
</html>
```